<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style media="screen">
        html,
        body {
            background: #fff;
        }

        .wrap {
            width: 100%;
            overflow: hidden;
        }

        .header_bg {
            width: 100%;
            position: relative;
            height: 223px;
            background: url(../../image/login_bg.png) no-repeat;
            background-size: 100% 177px;
        }

        .header {
            width: 100%;
            height: 44px;
            position: relative;
            /*border: 1px solid red;*/
        }

        .arrow_left {
            width: 22px;
            height: 24px;
            position: absolute;
            top: 10px;
            left: 12.5px;
            background: url(../../image/white_back.png) no-repeat;
            background-position: center center;
            background-size: 22px 22px;
            z-index: 99;
        }

        .title {
            width: 100%;
            height: 100%;
            line-height: 44px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .logo {
            width: 91px;
            height: 91px;
            background:red;
            /*box-shadow: 0px 13px 46px 0px rgba(120, 103, 255, 0.16);*/
            border-radius: 16px;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -45.5px;
            /*background: url(../../image/logo.png) no-repeat;
            background-size: 100% 100%;*/
        }
        .logo img{
          display: block;
          width: 100%;
          height: 100%;
        }
    </style>
</head>

<body>
    <header id="header">
        <div class="header_bg" id="header_bg">
            <div class="header">
                <div class="arrow_left" onclick="closePage()"></div>
                <div class="title">登录</div>
            </div>
            <div class="logo">
                <img :src="appinfo.logo" alt="">
            </div>
        </div>
    </header>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {
        var header = $api.byId('header_bg');
        $api.fixIos7Bar(header);
        $api.fixStatusBar(header);
        headerH = $api.offset(header).h;
        console.log(headerH);
        api.openFrame({
            name: 'login_frame',
            url: './login_frame.html',
            bounces: false,
            rect: { // 推荐使用Margin布局，用于适配屏幕的动态变化
                marginTop: headerH, // main页面距离win顶部的高度
                marginBottom: 0, // main页面距离win底部的高度
                w: 'auto' // main页面的宽度 自适应屏幕宽度
            },
            bgColor: '#FAF9F9',
            allowEdit: true
        });
        vm.appinfo = $api.getStorage('appinfo');

    };
    var vm = new Vue({
        el: "#header",
        data: {
          version:'',
          appinfo:''
        },
        methods: {

        }
    })

    function closePage() {
        cl.closeWin({
            name: 'login'
        });
    }
</script>

</html>
